import { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import './DrugConsumptionStats.css';
import axios from 'axios';
// import * as echarts from 'echarts/core';
export default function DrugConsumptionStats() {
  const chartRefOne = useRef(null);
  const chartRefBottom = useRef(null);
  const chartRefRight = useRef(null);
  // 今日药品耗材库存
  const [cursurplus, setCursurplus] = useState(0);
  // 昨日药材耗材占比
  const [yesterdayChart, setYesterdayChart] = useState([]);
  // 药品耗材库存趋势图
  const [weekChart, setWeekChart] = useState({});
  const [isDataLoaded, setIsDataLoaded] = useState(false);

  useEffect(() => {
    if (!isDataLoaded) {
      axios.get('http://8.148.7.123:8000/infomationcenter/drugs').then(res => {
        setCursurplus(res.data.data.drugsdatas.cursurplus);
        setYesterdayChart(res.data.data.drugsdatas.yesterdayChart);
        setWeekChart(res.data.data.drugsdatas.weekChart);
        setIsDataLoaded(true);
      });
    }
    const weekChartData = weekChart.data ? weekChart.data.map(item => {
      return {
        name: item.name,
        data: item.data,
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
        },
        emphasis: {
          focus: 'series',
        },
      }
    }) : [];
    const chartDomOne = chartRefOne.current;
    const myChartOne = echarts.init(chartDomOne);

    const optionOne = {
      series: [
        {
          type: 'gauge',
          progress: {
            show: true,
            width: 18,
          },
          axisLine: {
            lineStyle: {
              width: 18,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            length: 15,
            lineStyle: {
              width: 2,
              color: '#999',
            },
          },
          axisLabel: {
            distance: 25,
            color: '#999',
            fontSize: 14,
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 25,
            itemStyle: {
              borderWidth: 10,
            },
          },
          title: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            fontSize: 50,
            offsetCenter: [0, '70%'],
          },
          data: [
            {
              value: cursurplus * 100,
            },
          ],
        },
      ],
    };

    optionOne && myChartOne.setOption(optionOne);

    const chartDomBottom = chartRefBottom.current;
    const myChartBottom = echarts.init(chartDomBottom);
    const optionTwo = {
      title: {
        // text: 'Nightingale Chart',
        // subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: [
          'rose1',
          'rose2',
          'rose3',
          'rose4',
          'rose5',
          'rose6',
          'rose7',
          'rose8'
        ]
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          // dataView: { show: true, readOnly: false },
          // restore: { show: true },
          // saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Area Mode',
          type: 'pie',
          radius: [20, 120],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: [
            { value: 22.01, name: '一次性使用无菌注射器（22.01）' },
            { value: 19.6, name: '无菌输液器(19.60%)' },
            { value: 16.71, name: '真空采血管(16.71%)' },
            { value: 13.38, name: '中心静脉导管(单腔)(13.38%)' },
            { value: 10.56, name: '无菌注射针(10.56%)' },
            { value: 8.28, name: '灭菌脱脂棉球(8.28%)' },
            { value: 6.53, name: '医用手套(6.53%)' },
            { value: 2.89, name: '一次性穿刺器(2.89%)' }
          ]
        }
      ]
    };

    optionTwo && myChartBottom.setOption(optionTwo);

    const chartDomRight = chartRefRight.current;
    const myChartRight = echarts.init(chartDomRight);

    const newSeriesData = weekChartData;

    const optionThree = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
      },
      series: newSeriesData,
    };

    optionThree && myChartRight.setOption(optionThree);

    return () => {
      myChartOne.dispose();
      myChartBottom.dispose();
      myChartRight.dispose();
    };
  }, [isDataLoaded]);

  return (
    <>
      <div className="DrugConsumptionStatsBox">
        <div className="DrugConsumptionStatsLeft">
          <div className="DrugConsumptionStatsLeftTop">
            <div className="DrugConsumptionStatsLeftTitle">今日器材耗材库存</div>
            <div ref={chartRefOne} className="DrugConsumptionStatsLeftChart"></div>
          </div>
          <div className="DrugConsumptionStatsLeftBottom">
            <div className="DrugConsumptionStatsLeftTitle">昨日药材耗材占比</div>
            <div ref={chartRefBottom} className="DrugConsumptionStatsLeftBottomChart"></div>
          </div>
        </div>
        <div className="DrugConsumptionStatsRight">
          <div ref={chartRefRight} className="DrugConsumptionStatsRightChart"></div>
        </div>
      </div>
    </>
  );
}
// 87